<!--
 * @Author: lemon 1534860242@qq.com
 * @Date: 2025-08-04 14:50:01
 * @LastEditors: lemon 1534860242@qq.com
 * @LastEditTime: 2025-08-04 15:52:35
 * @FilePath: /xby-edu/component/TheNavigation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <nav class="navigation">
    <ul class="main-menu">
      <li class="menu-item">
        <NuxtLink :to="localePath('/')" exact-active-class="active">{{ t("nav.home") }}</NuxtLink>
      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" class="menu-item cursor-pointer" :class="{ active: isActive('/organization') }" @click.prevent="toggleSubMenu('organization')">
          {{ t("nav.organization") }}
        </a>
        <ul class="sub-menu" :class="{ open: openMenu === 'organization' }">
          <li class="menu-item">
            <NuxtLink :to="localePath({ path: '/organization', hash: '#intro' })"> {{ t("nav.organization_intro") }}</NuxtLink>
          </li>
          <li class="menu-item">
            <NuxtLink :to="localePath({ path: '/organization', hash: '#leaders' })"> {{ t("nav.organization_leaders") }}</NuxtLink>
          </li>
          <li class="menu-item">
            <NuxtLink :to="localePath({ path: '/organization', hash: '#advisors' })"> {{ t("nav.organization_advisors") }}</NuxtLink>
          </li>
          <li class="menu-item">
            <NuxtLink :to="localePath({ path: '/organization', hash: '#structure' })">{{ t("nav.organization_structure") }}</NuxtLink>
          </li>
        </ul>
      </li>

      <li class="menu-item">
        <NuxtLink :to="localePath('/research')" class="menu-item" :class="{ active: isActive('/research') }">{{ t("nav.research") }}</NuxtLink>
      </li>

      <li class="menu-item menu-item-has-children">
        <a href="#" class="menu-item cursor-pointer" :class="{ active: isActive('/achievements') }" @click.prevent="toggleSubMenu('achievements')">
          {{ t("nav.achievements") }}
        </a>
        <ul class="sub-menu" :class="{ open: openMenu === 'achievements' }">
          <li v-for="item in achievementInfo" :key="item.id" class="menu-item">
            <NuxtLink :to="localePath({ name: 'achievements-id', params: { id: String(item.id) } })">
              {{ item.name }}
            </NuxtLink>
          </li>
        </ul>
      </li>

      <li class="menu-item menu-item-has-children">
        <a href="#" class="menu-item cursor-pointer" :class="{ active: isGroupActive }" @click.prevent="toggleSubMenu('consulting')"> {{ t("nav.consulting") }} </a>
        <ul class="sub-menu" :class="{ open: openMenu === 'consulting' }">
          <li class="menu-item">
            <NuxtLink :to="localePath('/consulting/academy-news')" active-class="active" exact-active-class="active"> {{ t("nav.consulting_academy_news") }}</NuxtLink>
          </li>
          <li class="menu-item">
            <NuxtLink :to="localePath('/consulting/industry-news')" active-class="active" exact-active-class="active"> {{ t("nav.consulting_industry_news") }}</NuxtLink>
          </li>
        </ul>
      </li>

      <li class="menu-item">
        <NuxtLink :to="localePath('/contact')" class="menu-item" active-class="active" exact-active-class="active"> {{ t("nav.contact") }}</NuxtLink>
      </li>
    </ul>
    <div class="lang-select" @click.stop="toggleOpen">
      <!-- 当前语言 -->
      <div class="lang-current">
        <img :src="current.icon" alt="flag" class="flag" />
        <span class="arrow" :class="{ open: isOpen }">▲</span>
      </div>

      <!-- 下拉菜单 -->
      <transition name="fade">
        <ul v-show="isOpen" class="lang-list">
          <li v-for="item in languages" :key="item.key" @click.stop="selectLanguage(item)" :class="{ active: item.key === current.key }">
            <img :src="item.icon" alt="flag" class="flag" />
          </li>
        </ul>
      </transition>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

const { $translatejs } = useNuxtApp();
function change(lang: string) {
  // 与你原本的：translate.changeLanguage('xxx') 等价
  $translatejs?.changeLanguage(lang);
  // 修改后可以立即执行一次，提升体验
  requestAnimationFrame(() => $translatejs?.execute());
}

const { t } = useI18n();

const localePath = useLocalePath();
const isActive = (p: string) => {
  const target = localePath(p); // 例如 /en/contact
  return route.path === target || route.path.startsWith(target + "/");
};

const isOpen = ref(false);
const languages = [
  { key: "chinese_simplified", icon: "/flags/cn.png" },
  { key: "spanish", icon: "/flags/uk.png" },
  { key: "english", icon: "/flags/es.png" },
];

const current = ref(languages[1]);

const toggleOpen = () => (isOpen.value = !isOpen.value);
const selectLanguage = (item: any) => {
  current.value = item;
  isOpen.value = false;
  change(item.key);
  localStorage.setItem("preferred_lang", item.key);
};

const route = useRoute();
const isGroupActive = computed(() => {
  const base = localePath("/consulting");
  return route.path === base || route.path.startsWith(base + "/");
});

// 是否移动端，简单判断
const isMobile = ref(false);

const openMenu = ref<string | null>(null);

const toggleSubMenu = (key: string) => {
  openMenu.value = openMenu.value === key ? null : key;
};

// 获取成果转化
const achievementInfo = ref<any>({});

const getAchievementInfo = async () => {
  try {
    const res: any = await getFetchData({
      url: "/api/chengguo_get_list",
      method: "get",
    });
    achievementInfo.value = res?.data || {};
  } catch (error) {
    console.log(error);
  }
};

await getAchievementInfo();

onMounted(() => {
  const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768;
  };
  checkMobile();
  window.addEventListener("resize", checkMobile);

  const path = route.path;

  if (path.startsWith("/organization")) {
    openMenu.value = "organization";
  } else if (path.startsWith("/consulting")) {
    openMenu.value = "consulting";
  } else if (path.startsWith("/achievements")) {
    openMenu.value = "achievements";
  }
});
</script>

<style scoped>
/* 美化选择框 */
.lang-selector select {
  appearance: none; /* 去掉浏览器默认样式 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: white url("data:image/svg+xml;utf8,<svg fill='black' height='14' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px
    center;
  background-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 30px 6px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lang-selector select:focus {
  outline: none;
  border-color: #3b82f6; /* 蓝色边框 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.header .navigation .change-language {
  @media (max-width: 768px) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}

.lang-select {
  position: relative;
  width: 60px;
  background: white;
  border-radius: 28px;
  padding: 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  user-select: none;
}
.lang-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.arrow {
  font-size: 10px;
  transition: transform 0.2s;
}
.arrow.open {
  transform: rotate(180deg);
}
.lang-list {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  background: white;
  border-radius: 28px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.lang-list li {
  transition: transform 0.2s, opacity 0.2s;
}
.lang-list li:hover {
  transform: scale(1.1);
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
